@import url('~@/styles/animations.less');
@import url('~@/styles/mixin.less');

.train {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: url('~@/assets/report/department/trainLeftBg.png') no-repeat center;
    background-size: cover;
    .active_train_wrapper {
        .gradient-wrapper();
        .train_wrapper_content {
            .gradient-wrapper-content();
        }
    }
    &_wrapper,
    .active_train_wrapper {
        z-index: 99;
        display: inline-block;
        margin: 32px 0 0 24px;
        overflow: hidden;
        &_content {
            color: #fff;
            p {
                margin: 0;
                margin-bottom: 13px;
                font-weight: 400;
                font-size: 16px;
                line-height: 22px;
                span {
                    margin: 0 4px;
                    font-weight: 500;
                    font-size: 28px;
                    line-height: 28px;
                }
                .project {
                    color: #fff88f;
                }
            }
            .sortText {
                margin-bottom: 4px;
            }
            .line {
                width: 64px;
                height: 2px;
                margin: 25px 0 16px 0;
                background: rgba(255, 255, 255, 0.6);
                border-radius: 1px;
            }
        }
    }
    .active_train_arrow {
        .tilt-in-fwd-bl-lf();
    }
    &_arrow,
    .active_train_arrow {
        position: absolute;
        bottom: 16%;
        left: 0;
        z-index: 9;
    }
    &_circular {
        position: absolute;
        bottom: 0;
        left: 0;
    }
}
